<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>电梯导航</title>
  
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .top, .dian, .jia, .fu, .mei, .bottom {
      width: 1210px;
      margin: 0 auto;
    }
    
    .subnav {
      position: fixed;
      width: 38px;
      height: 200px;
      top: 200px;
      left: 50%;
      margin-left: 605px;
      display: none;
    }
    
    .subnav li, .back {
      height: 36px;
      border: 1px solid #DEDEDE;
      margin-bottom: 5px;
      font-size: 0;
      background: url(images/bg.png) no-repeat;
    }
    
    .subnav li:hover, .subnav li.current, .back {
      border: 1px solid #ED5759;
      background: #FDEEEE; /* 只有冲突的时候才会出现层叠 */
      /* 背景颜色 背景图片 背景位置 背景平铺  背景固定 */
      /* css 层叠样式表 */
      font-size: 12px;
      color: #ED5759;
      padding-left: 6px;
      padding-top: 2px;
      height: 34px;
      cursor: pointer;
    }
  </style>

</head>
<body>

<div class="top">
  <img src="images/top1.png" alt=""/>
</div>
<div class="jd dian">
  <img src="images/dian.png" alt=""/>
</div>
<div class="jd jia">
  <img src="images/jia.png" alt=""/>
</div>
<div class="jd fu">
  <img src="images/fu.png" alt=""/>
</div>
<div class="jd mei">
  <img src="images/mei.png" alt=""/>
</div>
<div class="bottom">
  <img src="images/bottom.png" alt=""/>
</div>
<div class="subnav">
  <ul>
    <li>电脑数码</li>
    <li>家电通讯</li>
    <li>服饰精品</li>
    <li>美容珠宝</li>
  </ul>
  <div class="back">返回</div>

</div>

</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>

  /**
   *
   * 分析：
   *    1.只要页面往下滚动一点，右边固定定位的电梯导航就显示，否则隐藏
   *    在滚动的时候还得判断距离，设置电梯导航和内容对应
   *    2.设置图标对应
   *    3.点击电梯导航，页面就立刻滚动到对应的内容区域
   *    4，返回顶部
   *
   */


  $(function () {
    //设置图标对应，该图标是一张精灵图，每个图标之间的间隔就是55px
    //获取电梯导航的元素
    var lis = $(".subnav li");
    //循环遍历来得到电梯导航图标的对应
    for (var i = 0; i < lis.length; i++) {
      //通过修改每个li的 background-position-y 的属性来得到相应的背景图标对应
      lis.eq(i).css("background-position-y", i * (-55));
    }
    //获取楼层
    var jds = $(".jd");
    //点击电梯导航，让页面滚动到对应的位置
    lis.click(function () {
      //因为电梯导航跟对应的内容是索引对应的，先得到索引
      var index = $(this).index();
      //求出对应索引的内容距离页面顶部的距离
      var top = jds.eq(index).offset().top;
      //设置页面滚动到对应的内容的顶部；为了兼容，html和body都写上
      $("html,body").animate({
        scrollTop: top
      }, 800);
    });
    //页面滚动事件
    $(window).scroll(function () {
      //暂定只要滚动的距离大于0就显示
      var scrollTop = $(window).scrollTop();
      //进行判断，大于0显示，否则隐藏
      if (scrollTop > 0) {
        $(".subnav").show();
      } else {
        $(".subnav").hide();
      }
      //在一开始把样式都清除掉
      $("li.current").removeClass("current");
      //判断滚动出去的距离，然后设置对应的电梯导航的内容
      //建议从后面开始判断，这样代码可以少写一些
      //超过珠宝美容部分
      if (scrollTop >= $(".mei").offset().top - 10) {
        //修改当前的图标样式
        lis.eq(3).addClass("current");
        //超过服饰精品部分
      } else if (scrollTop >= $(".fu").offset().top - 10) {
        //修改当前的图标样式
        lis.eq(2).addClass("current");
        //超过家电通讯部分
      } else if (scrollTop >= $(".jia").offset().top - 10) {
        //修改当前的图标样式
        lis.eq(1).addClass("current");
        //超过电脑数码部分
      } else {
        //修改当前的图标样式
        lis.eq(0).addClass("current");
      }
    });
    //点击返回按钮，返回顶部，电梯导航隐藏
    $(".back").click(function () {
      var top = 0;
      $("html,body").animate({
        scrollTop: top
      }, 800);
      $(".subnav").hide();
    });
  });
</script>